<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html xmlns="http://www.w3.org/TR/xhtml1">
    <head>
		<link type="text/css" rel="stylesheet" href="/css/lightBlue.css"/>
		<link type="text/css" rel="stylesheet" href="/css/greenOrange.css"/>
        <link type="text/css" rel="stylesheet" href="/css/main2.css" />
        <script src = "../js/unittest.js">
        </script>
        <script src = "../js/rational.js">
        </script>
        <script src = "../js/piece.js">
        </script>
        <script src = "../js/connectedPiece.js">
        </script>
        <script src = "../js/stripe.js">
        </script>
        <script src = "../js/board.js">
        </script>
        <script src = "../js/render.js">
        </script>
        <script src = "../js/wz_jsgraphics.js">
        </script>
        <script src = "../js/jquery-1.3.2.min.js">
        </script>
        <script src = "../js/jquery.jbind-1.5.8.js">
        </script>
        <script src = "../js/tutorial.js">
        </script>
        <script src = "../js/outputter.js">
        </script>
        <script src = "../js/overlay.js">
        </script>
        <script src = "../js/stateManager.js">
        </script>
        <script src = "../js/controller2.js">
        </script>
        <script src = "../js/size.js">
        </script>
        <script src = "../js/move.js">
        </script>
        <script src = "../js/game.js">
        </script>
        <script src = "../js/algorithm.js">
        </script>
        <script src = "../js/algCluster.js">
        </script>
        <script src = "../js/algDeep.js">
        </script>
        <script src = "../js/util.js">
        </script>
        <script src = "../js/chats.js">
        </script>
        <script src = "../js/json2.js">
        </script>
        <script src = "../js/remoteUser.js">
        </script>
        <script src = "../js/remotePlayer.js">
        </script>

        <script>
            var initialized = false;
			$(document).ready(function(){
                init();
            });

            function init() {
                if (initialized) {
                    return;
                }
                initialized = true;
                //testAll();

                var remotePlay = null;

{% if table %}
                setupChat({{ table.table_number_str }});
                remotePlay = new RemotePlayer({{ table.table_number_str }});
{% endif %}
                var controller = new Controller("board", remotePlay);
                var sizeController = new SizeController(controller);
                controller.init(sizeController);

            }
        </script>
		<title>Crumble</title>
	</head>
	<body class="csLightBlue">
		<div class="secondaryBackgroundColor primaryTextColor" id="wrapper">
			<div id="header" class = "header">
				<h2 id="whoseMove">
					Black to move
				</h2>
				<div id = "links">
				  <ul>
{% if user %}

			        <li>Logged in as <b>{{ user.nickname }}</b> | </li>
            		<li><a href="/room" target="_blank">Home</a> | </li>
            		<li><a href="/edituser/{{ user.email }}"  target="_blank">Edit My Profile</a> | </li>
            		<li><a href="{{log_in_out_url}}">Log out</a> | </li>
{% else %}
        			<li><a href="{{log_in_out_url}}">Log in to play with other players</a> | </li>
{% endif %}
				    <li><a href="http://sites.google.com/site/crumblegame/" target="_blank">About Crumble Game</a></li>
				  </ul>
				</div>
			</div>
			<div id="main">
				<div id = "boardMain" class = "primaryBackgroundColor primaryBorderColor">
					<div id="board">
					</div>
					<div id="message">
				  		<p>message</p>
					</div>
					<div id="zoomControls" class ="primaryBackgroundColor primaryBorderColor">
					  <ul>
					    <li><input type="image" title="Zoom in. You can also use Ctrl + drag mouse instead" src="../static/images/zoom-in.bmp" onclick="_controller.onButton(ZOOM_IN);"</li>
					    <li><input type="image" title="Zoom out. You can also use Ctrl + drag mouse instead" src="../static/images/zoom-out.bmp" onclick="_controller.onButton(ZOOM_OUT);"</li>
					    <li><input type="image" title="Snap board into the window" src="../static/images/fit-to-window.bmp" onclick="_controller.snapView();"</li>
					    <li><input type="image" title="Pan. You can also use Shift + drag mouse instead" src="../static/images/pan.bmp" onclick="_controller.onButton(PAN);"</li>
					  </ul>

 					</div>
				</div>
				<!--
				<div id = "sidebar">
					<p>SideBar</p>
				</div> -->

				<div id = "boardInfo" class="primaryBackgroundColor primaryBorderColor">
					<div id="controls">
					  <ul>
					    <li><input title="Comlete the move" class="large" type="image" src="../static/images/Crumble-64-BK-complete.jpg" onclick="_controller.submitMove();"</li>
					    <li><input title="Undo last move" type="image" src="../static/images/Crumble-64-BK-undo.jpg" onclick="_controller.undo();"</li>
					    <li><input title="Cancel current move" type="image" src="../static/images/Crumble-64-BK-cancel.jpg" onclick="_controller.cancelMove();"</li>
					    <li id="separator"></li>
					    <li><input title="Horizontal split" type="image" src="../static/images/Crumble-64-BK-split-HZ.jpg" onclick="_controller.onButton(SPLIT_H);"</li>
					    <li><input title="Vertical split" type="image" src="../static/images/Crumble-64-BK-split-VT.jpg" onclick="_controller.onButton(SPLIT_V);"</li>
					    <li><input title="Join. You can use Shift + Ctrl + mouse drag instead" type="image" src="../static/images/Crumble-64-BK-join.jpg" onclick="_controller.onButton(MERGE);"</li>
					    <li><input title="Swap. You can use mouse click instead" type="image" src="../static/images/Crumble-64-BK-swap.jpg" onclick="_controller.onButton(SWAP);"</li>
					  </ul>
					</div>
					<div id="activePlayers">
						<div class="black" id="activePlayer">
                          <p class="color">Black</p>
						  <div class="player truncate">
						  </div>
						</div>
						<div class="white" id="activePlayer">
					      <p class="color">White</p>
						  <div class="player truncate">
						  </div>
						</div>
				     </div>
					 <div id ="gameSettings">
					   	<div>
					   	 <p class="groupName secondaryTextColor">Game Settings</p>
					   	 <p class="description">Board skin: </p>
					   	 <select id="gameSkins" class="controlsTheme" onchange="_controller.skinChanged(this.options[this.selectedIndex].value)">
							  <option value="classic">Classic</option>
							  <option value="diamond_classic">Diamond</option>
							  <option value="chocolate">Chocolate</option>
						 </select>
					     <br><p class="description">Color scheme: </p>
					   	 <select id="colorScheme" class="controlsTheme" onchange="_controller.colorSchemeChanged(this.options[this.selectedIndex].value)">
							  <option value="csLightBlue">Light Blue</option>
							  <option value="csGreenOrange">Green Orange</option>
						 </select>

{% if not user %}
                         <div><button  class="textButton" type="button" onClick="_controller.newGame(UNKNOWN)">New game</button></div>
                         <div class="checkbox"><INPUT TYPE="checkbox" id="demo" UNCHECKED onClick="_controller.setDemo()">demo mode</INPUT></div>
                         <div class="checkbox"> <INPUT TYPE="checkbox" id="blackPlayerComp" UNCHECKED onClick="_controller.setBlackPlayerComp()">Computer plays Black (Easy)</INPUT></div>
                         <div class="checkbox"><INPUT TYPE="checkbox" id="whitePlayerComp" UNCHECKED onClick="_controller.setWhitePlayerComp()">Computer plays White (Moderate)</INPUT></div>
	                     <div class="checkbox"><INPUT TYPE="checkbox" id="validator" CHECKED onClick="_controller.turnValidation()">turn on validation</INPUT></div>
{% endif %}
					   </div>
					<!--</div>
					<div id ="newGame"> -->
					   <div>

{% if user %}
                         <div><button class="textButton" type="button" id="newGameWhite" onClick="_controller.requestNewGame(WHITE)">New game as White</button></div>
                         <div><button class="textButton" type="button" id="newGameBlack" onClick="_controller.requestNewGame(BLACK)">New game as Black</button></div>
                         <div><INPUT TYPE="checkbox" id="desiredBlack" CHECKED style="visibility: hidden;"></INPUT></div>
{% endif %}
                       </div>
					</div>
					<div id = "moveHistory" class="moveHistoryTheme">
					    <ol>
					    </ol>
					</div>
{% if user %}
					<div id = "viewers">
					  <p class="groupName">Viewers:</p>
					  <ul>
					  </ul>
					</div>
					<div id="chat">
					  <div id="chatInput">
                        <form action="javascript:sendChat();">
                          <div><input  id="chattext" name="content" type="text" class="controlsTheme"></input>
                            <input class="textButton" type="submit" value="Chat">
                          </div>
                        </form>
                     </div>
                     <div id="chats" class="controlsTheme">
					</div>
{% endif %}
				</div>
			</div>
<!--
			<div id="footer">
				<div id="message">
				  <p>message</p>
				</div>
			</div>
-->
<!-- TEMPLATES ARE HERE -->
		    <div id="playerTemplate" style="display:none">
		      <!--data-->
		        <img id="status" class="active" src="/static/images/status{status}.gif"/>
		        <p id="name">{name}</p>
		        <p id="rating">rating: {rating}</p>
		      <!--data-->
  		    </div>
		    <div id="viewerTemplate" style="display:none">
		      <!--data-->
  		        <li class="player truncate">
		          <img id="status" class="active" src="/static/images/status{status}.gif"/>
		          <p id="name">{name}</p>
		          <p id="rating">rating: {rating}</p>
		        </li>
		      <!--data-->
  		    </div>

  		    <div id="moveHistoryTemplate" style="display:none">
  		      <!--data-->
  		      <li class="color{color} {additionalClass}"  onclick="_controller.onMoveSelected({move});">{move}</li>
  		      <!--data-->
  		    </div>
	    </div>
	  </div>
	</body>
</html>
<!--
C:\Documents and Settings\mishal\dev\crumble\appengine\templates\crumble2.html
-->